<template>
  <div>
    <div class="custom-tree-container">
      <div class="block">
        <el-tree
          :data="tree"
          show-checkbox
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
          :render-content="renderContent">
            <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
            type="text"
            size="mini"
            @click="() => append(data)">
            新增
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => remove(node, data)">
            删除
          </el-button>
        </span>
      </span>
        </el-tree>
      </div>
    </div>

    <!--   新增商品单位 -->
    <el-dialog
      title="新增商品单位"
      :visible.sync="addDialogVisible"
      width="30%"
      :show-close="false"
      :close-on-click-modal="false"
      :before-close="handleClose">

      <el-form ref="form" :model="form" label-width="80px">

        <el-form-item label="节点名">
          <el-input size="small" v-model="form.label"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmitAdd()">新增</el-button>
          <el-button @click="onCancel()">取消</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "GoodsCategory",
    data() {
      return {
        addDialogVisible: false,
        tree: [],
        form: {
          id: null,
          label: "",
          parentId: null
        }
      }
    },
    mounted: function () {
      this.handleTreeList()
    },
    methods: {
      handleTreeList() {
        this.axios.post('http://localhost:8080/goodsCategory/selectTreeList').then((response) => {
          let data = response.data;
          if (data.code === 200) {
            this.tree = data.data;
          }
        });
      },
      append(data) {
        this.form.parentId = data.id;
        this.addDialogVisible = true
      },
      onSubmitAdd() {
        this.axios({
          method: 'post',
          url: 'http://localhost:8080/goodsCategory/insert',
          data: this.form
        }).then((response) => {
          let data = response.data;
          if (data.code === 200) {
            this.addDialogVisible = false;
            this.$message({message: data.message, type: 'success'});
            this.handleTreeList()
          }
        });
      },
      remove(node, data) {
        this.axios({
          method: 'post',
          url: 'http://localhost:8080/goodsCategory/deleteRecursionById?id='+data.id
        }).then((response) => {
          let data = response.data;
          if (data.code === 200) {
            this.$message({message: data.message, type: 'success'});
            this.handleTreeList()
          }
        });
      }
      ,
    }
  }
</script>

<style scoped>

</style>
